<template>
    <a-modal :visible="visible" :width="1200" @ok="submit" @cancel="cancel">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
            <a-form layout="inline" @keyup.enter.native="getFoodList">
                <a-row :gutter="24">
                    <a-col :span="6">
                        <a-form-model-item label="菜品名称">
                            <a-input v-model="queryParam.keyWord" />
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="6">
                        <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
                            <a-button type="primary" @click="getFoodList" icon="search">查询</a-button>
                            <a-button type="primary" @click="searchReset" icon="reload"
                                style="margin-left: 8px">重置</a-button>
                        </span>
                    </a-col>
                </a-row>
            </a-form>
        </div>
        <!-- table区域-begin -->
        <div>
            <div class="ant-alert ant-alert-info" style="margin-bottom: 16px">
                <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择
                <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
                <a style="margin-left: 24px" @click="onClearSelected">清空</a>
            </div>

            <a-table ref="table" size="middle" :scroll="{ x: true }" :bordered="false" rowKey="id" :columns="columns"
                :dataSource="dataSource" :pagination="ipagination" :rowSelection="{
                    selectedRowKeys: selectedRowKeys,
                    onChange: onSelectChange,
                    getCheckboxProps: (record) => ({
                        props: {
                            disabled: record.disabled
                        }
                    })
                }" :loading="loading" class="j-table-force-nowrap" @change="handleTableChange">
                <template slot="imgSlot" slot-scope="text, record, index">
                    <span v-if="!text" style="font-size: 12px; font-style: italic">无图片</span>
                    <img v-else :src="getImgView(text)" height="25px" alt=""
                        style="max-width: 80px; font-size: 12px; font-style: italic" @click="showCropper(index)" />
                </template>
            </a-table>
        </div>
    </a-modal>
</template>
  
<script>
import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { postAction, getAction } from '@api/manage'

export default {
    name: 'HcCommodityList',
    mixins: [JeecgListMixin, mixinDevice],
    data() {
        return {
            // 表头
            columns: [
                {
                    title: '#',
                    dataIndex: '',
                    key: 'rowIndex',
                    width: 60,
                    align: 'center',
                    customRender: function (t, r, index) {
                        return parseInt(index) + 1
                    },
                },
                {
                    title: '商品名称',
                    align: 'center',
                    dataIndex: 'foodName',
                },
                {
                    title: '商品描述',
                    align: 'center',
                    dataIndex: 'foodDescription',
                    customRender: function (t, r, index) {
                        return t ? t : '——'
                    },
                },
                {
                    title: '商品图片',
                    align: 'center',
                    dataIndex: 'foodPic',
                    scopedSlots: { customRender: 'imgSlot' },
                },
                {
                    title: '限购',
                    align: 'center',
                    dataIndex: 'limitNum',
                }
            ],
            url: {
                list: 'hc/hcCompanyInfo/list',
                delete: '/hc/hcCommodity/delete',
                deleteBatch: '/hc/hcCommodity/deleteBatch',
                exportXlsUrl: '/hc/hcCommodity/exportXls',
                importExcelUrl: 'hc/hcCommodity/importExcel',
            },
            visible: false,

            storeIds: '',
        }
    },
    methods: {
        show(companyId, merchantId, storeIds) {
            console.log('我是参数', ...arguments)
            this.visible = true;
            this.queryParam.companyId = companyId
            this.queryParam.merchantId = merchantId
            this.storeIds = storeIds;

            this.selectedRowKeys = [];
            this.rowSelection = [];

            this.getFoodList();
        },
        async getFoodList() {
            console.log('!!!!!!!!!!')
            this.dataSource = [];
            console.log('this.dataSource', this.dataSource);
            let { companyId, merchantId, keyWord } = this.queryParam;
            let res = await getAction('hc/hcCompanyFoodList/listNew', { companyId, merchantId, keyWord });
            console.log('res', res)
            res.result.forEach((item, index) => {
                this.$set(item, 'disabled', this.storeIds.indexOf(item.id) != -1 ? true : false)
            })
            this.dataSource = res.result;
            console.log('this.dataSource', this.dataSource);
        },

        async submit() {
            this.visible = false;
            this.$emit('getFoodList', this.selectedRowKeys);
        },
        cancel() {
            this.visible = false;
            this.dataSource = [];
        }
    },
}
</script>
<style scoped></style>